import { FC, useEffect, useRef } from "react"
import { AxesHelper,  PerspectiveCamera, PointLight,  Scene, WebGLRenderer, Vector3 } from "three"
import { PointModel, LineModel } from "R/models";
import { OrbitControls } from "three/examples/jsm/Addons.js";

const Page: FC = () => {


    // PointModel.position.set(0, 0, 0)
    LineModel.position.add(new Vector3(1, 1, 1))
    const container = useRef<HTMLCanvasElement>(null);
    
    // 基本对象
    useEffect(() => {
        const bodyele = document.body;
        const renderer = new WebGLRenderer({ canvas: container.current! }),
            camera = new PerspectiveCamera(90, bodyele.clientWidth / bodyele.clientHeight, 1, 1000),
            scene = new Scene(),
            pointLight = new PointLight(0xffffff, 10),
            axesHelper = new AxesHelper(100),
            orbit = new OrbitControls(camera, renderer.domElement)
        pointLight.position.set(100, 100, 100)
        pointLight.decay = 0
        scene.add(axesHelper, PointModel, LineModel,  pointLight)
        camera.position.set(15, 14, 13)
        camera.lookAt(LineModel.position)
        renderer.setSize(bodyele.clientWidth * devicePixelRatio, bodyele.clientHeight * devicePixelRatio)
        function roun(t?: number) {
            renderer.render(scene, camera)
            requestAnimationFrame(roun)
        }
        roun()
        return () => {
            renderer.dispose()
        }
    }, [])
    return <canvas ref={container}></canvas>
}
export default Page